<template>
  <div>
    <div class="box1">
      <div class="r-box">
        <el-card class="box-cardl">
          <div slot="header" class="clearfix">
            <img :src="form.imgsrc" />
          </div>
          <div class="nn">
            {{ form.name }}
          </div>
          <div class="cc">
            {{ form.count }}
          </div>
        </el-card>
      </div>
      <div class="r-box">
        <el-card class="box-cardr">
          <div slot="header" class="clearfix">
            <span class="nnn">{{ form.name }}</span>
            <span class="ccc">{{ form.count }}</span>
            <div class="pp">
              <span class="oo" v-for="(item, index) in jieshao" :key="index">
                <h1 style="display: inline-block; text-align: left">
                  {{ item.tit }}
                </h1>
                <p class="dd">
                  {{ item.t }}
                </p>
              </span>
            </div>
          </div>
          <div>
            <div class="rr">￥{{ form.sell }}</div>
            <div class="sp" @click="goShop">立即购买</div>
            <div class="che" @click="addChe">加入购物车</div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="box2">
      <div class="box2-l">
        
      </div>
      <div class="box2=r">

      </div>
    </div>
  </div>
</template>

<script>
import CoolectionAntiqueApi from '@/api/collection/CoolectionAntiqueApi'
import ShopCheApi from '@/api/order/ShopCheApi'
export default {
  name: "CoolectionInfo",
  data() {
    return {
      i: 1,
      uid: "",
      form: {
        id: "",
      imgsrc: "/User-Img/f0c43a02-1234-4d62-aa74-621a096af924.jpg",
      name: "阳光",
      count: 1,
      sell: 20,
      },
      jieshao: [
        {
          tit: "版权属性",
          t: "版权品",
        },
        {
          tit: "艺术家",
          t: "这是哪头猪？",
        },
        {
          tit: "首发方",
          t: "这是哪头猪？",
        },
      ],
    };
  },
  created() {
    this.form.id = sessionStorage.getItem("CLID");
    this.uid = sessionStorage.getItem('userId');
    console.log("哈哈哈哈"+this.uid)
    this.queryCoolectionById(this.form.id);

  },

  methods: {
    queryCoolectionById(id){
      console.log(1)
      CoolectionAntiqueApi.queryCoolectionById(id).then(res => {
        console.log(res.data.data)
        this.form=res.data.data
      })
    },
    goShop(){
      // console.log(this.form, this.uid)
      ShopCheApi.goShop(this.form, this.uid).then(res => {
        if (res.data.code != 1) {
            this.$message.error(res.data.message)
            // this.queryCoolectionById(this.form.id);
          } else {
            this.$message.success(res.data.message);
          }
      })
    },
    addChe(){
      if (this.i > this.form.count) {
        this.$message.error("藏品不足，亲过端时间再加购物车");
      } else {
        // console.log(this.id)
        var uid=sessionStorage.getItem('userId')
        ShopCheApi.insertShopChe(this.form.id, uid, this.form.sell).then(res=>{
          console.log(res.data)
          if (res.data.code != 1) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success(res.data.message);
            this.i=this.i+1;
          }
        })
      }
    }
  }
};
</script>

<style scoped>
.box1 {
  width: 1170px;
  height: 469px;
  /* background: rgb(116, 104, 104); */
  position: relative;
  margin: 2% auto;
}
.box2 {
   width: 1170px;
  height: 200px;
   /* background: rgb(116, 104, 104); */
   position: relative;
   margin: 2.5% auto;
}
.box-cardl {
  float: left;
  width: 550px;
  height: 469px;
}
.box-cardr {
  float: right;
  width: 550px;
  height: 469px;
}

img {
  width: 480px;
  height: 350px;
  position: relative;
  left: 16px;
  top: 14px;
}
.nn {
  float: left;
  position: relative;
  left: 40%;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin-bottom: 6px;
}
.cc {
  float: left;
  position: relative;
  left: 45%;
  background: linear-gradient(154deg, #282828, #484848);
  color: #e7aa71;
  border-radius: 10%;
}
.nnn {
  font-size: 26px;
  font-weight: 700;
  color: #000;
  line-height: 40px;
}
.ccc {
  line-height: 18px;
  background: linear-gradient(154deg, #282828, #484848);
  color: #e7aa71;
  font-size: 18px;
  margin-left: 20px;
}
.pp {
  width: 509px;
  height: 57px;
  margin-top: 14px;
  /* background-color: palegoldenrod; */
}
.OO {
  width: 69px;
  height: 34px;
  display: inline-block;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
}
.dd {
  display: inline-block;
  position: relative;
  left: -72px;
  top: 25px;
  text-align: left;
}
.rr {
  color: #f4a33a;
  height: 68px;
  line-height: 68px;
  font-size: 26px;
  font-weight: 700;
  background-size: 24px 24px;
}
.sp,
.che {
  width: 300px;
  height: 46px;
  /* background: linear-gradient(90deg,#ff7a64,#e61f1a); */
  border-radius: 23px;
  color: #fff;
  padding-left: 24px;
  font-size: 14px;
  line-height: 46px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.sp::after,
.che::after {
  content: "";
  background: url(//static.theone.art/pc/images/pic-home/buy.png) no-repeat 0;
  background-size: 24px 24px;
  position: absolute;
  right: 24px;
  width: 24px;
  height: 100%;
}
.sp {
  background: linear-gradient(90deg, #ff7a64, #e61f1a);
  margin-bottom: 30px;
}

.che {
  background: linear-gradient(90deg, #84427b, #4e77a6);
}
.box2-l {
  width: 239px;
    border-right: 1px solid rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>